<template>
  <div>
    <!-- <input
      type="text"
      v-model='name'
    >
    <button @click='fn'>btn</button>
    <div
      class='qqq'
      :class='{box:1>2,box2:1<2,box3:1==2}'
      :style="{color:'red'}"
      v-html="str"
      v-show='name.length < 6'
    ></div> -->
    <!-- <p
      v-for='qqq in 6'
      v-if='qqq>2'
    >{{qqq}}</p>
    <ul v-pre>
      <li>1{{name}}</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul> -->

    <!-- <div
      class="outer"
      @click.self='outer'
    >
      <div
        class="inner"
        @click.once='inner'
      >
        <a
          href="http://baidu.com"
          @click.prevent='inner'
        >baidu</a>
      </div>
    </div>

    <input
      type="text"
      v-model.lazy='name'
      @keyup.13="submit($event,1,2,3,4,$event,5,$event)"
    >
    <h1 id='h1'>{{name}}</h1> -->
  </div>
</template>
<script>
// @ is an alias to /src
/* 
  v-model 是 value和input事件的结合体：给input框赋予了一个value值 而且还绑定了一个input事件
  v-html  相当于原生的 innerHTML   ()
  v-text  相当于原生的  innerText

  v-clock  后边不跟任何内容 配合css解决小胡子的展示问题（仅会出现在 html文档中使用vue的情况）
  v-pre  告诉vue有这个属性标签及子标签 不用vue解析； 优化性的指令


  v-for   数字 数组 字符串 对象
  v-if    判断一个标签是否加载的指令 后边跟的表达式会转成布尔类型进行判断(有比较大的切换开销)
  v-show  判断一个标签是否显示的指令 后边跟的表达式会转成布尔类型进行判断(有比较大的初始加载开销)

  在vue2中 v-for优先级 高于 v-if; vue3中 正好相反


  v-bind 专门用来处理元素的行内属性 简写是个:
          class  style

  v-on 专门用来做事件绑定的  简写@   
  @xxx='fn'   fn会默认传递一个事件对象e
  @xxx='fn()'   fn不会有任何实参
  @xxx='fn(1,2,3,4,5)'   fn有实参12345
  @xxx='fn(1,2,3,4,5,$event)'   fn有实参12345
  
  修饰符的问题
  .stop

  .enter
  (事件修饰符  按键修饰符  系统修饰符  鼠标修饰符  v-model修饰符)







*/
export default {
  data() {
    return {
      name: "珠峰",
      str: "<h1>hello</h1>",
      cla: "box",
    };
  },

  methods: {
    //  这里的属性和data中的属性一样 都会被挂在到当前实例上
    // 这里边的函数中的this都是当前实例
    fn() {
      console.log(this);
      console.log(6666);
    },
    outer() {
      console.log("outer");
    },
    inner() {
      console.log("inner");
    },
    submit() {
      console.log(arguments);
      console.log("submit");
    },
  },
};
</script>
<style lang="less">
.outer {
  width: 300px;
  height: 300px;
  background: red;
  .inner {
    width: 100px;
    height: 100px;
    background: rgb(229, 255, 0);
  }
}
</style>